<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>电子书</title>
    <link rel="stylesheet" type="text/css" href="css/basic.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="js/turn.js"></script>
    <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</head>

<body>
    <div style="display: none">
        <audio id="fymap3" src="./music/fy.mp3"></audio>
    </div>
    <div style="display: none">
        <audio id="ypmp3" src=""></audio>
    </div>

    <div class="shade">
        <div class="sk-fading-circle">
            <div class="sk-circle1 sk-circle"></div>
            <div class="sk-circle2 sk-circle"></div>
            <div class="sk-circle3 sk-circle"></div>
            <div class="sk-circle4 sk-circle"></div>
            <div class="sk-circle5 sk-circle"></div>
            <div class="sk-circle6 sk-circle"></div>
            <div class="sk-circle7 sk-circle"></div>
            <div class="sk-circle8 sk-circle"></div>
            <div class="sk-circle9 sk-circle"></div>
            <div class="sk-circle10 sk-circle"></div>
            <div class="sk-circle11 sk-circle"></div>
            <div class="sk-circle12 sk-circle"></div>
        </div>
        <div class="number"></div>
        <div class="jztext">正在加载中</div>
    </div>
    <div class="flipbook-viewport" style="display:none;">
        <div class="fyanbtn">
            <div class="ymicon">
                <span>0</span>/<span>0</span>
            </div>
            <div class="previousPage"></div>
            <div class="nextPage"></div>
            <div class="return"></div>
            <div class="morelisticon morepage"></div>
            <img class="btnImg" src="./image/btn.png" style="display: none" />
        </div>
        <div class="container">
            <div class="flipbook">
            </div>
        </div>
        <div class="hpbtn">
            <img src="./image/xz.png" alt="">
        </div>
    </div>

    <div class="zdymodel">
        <div class="sjbox">
            <div class="closelist"><img src="./image/close.png" alt=""></div>
            <ul>
                <!-- 分页列表 -->
            </ul>
        </div>
    </div>


    <script>
        //自定义仿iphone弹出层
        (function($) {
            //ios confirm box
            jQuery.fn.confirm = function(title, option, okCall, cancelCall) {
                var defaults = {
                    title: null, //what text
                    cancelText: '取消', //the cancel btn text
                    okText: '确定' //the ok btn text
                };

                if (undefined === option) {
                    option = {};
                }
                if ('function' != typeof okCall) {
                    okCall = $.noop;
                }
                if ('function' != typeof cancelCall) {
                    cancelCall = $.noop;
                }

                var o = $.extend(defaults, option, {
                    title: title,
                    okCall: okCall,
                    cancelCall: cancelCall
                });

                var $dom = $(this);
                var dom = $('<div class="g-plugin-confirm">');
                var lsdom = null;
                if (!flag) {
                    var dom1 = $('<div class="newts nhengpign1">').appendTo(dom);
                } else {
                    var dom1 = $('<div class="newts">').appendTo(dom);
                }

                var dom_content = $('<div>').html(o.title).appendTo(dom1);
                var dom_btn = $('<div>').appendTo(dom1);
                var btn_cancel = $('<a href="#"></a>').html(o.cancelText).appendTo(dom_btn);
                var btn_ok = $('<a href="#"></a>').html(o.okText).appendTo(dom_btn);
                btn_cancel.on('click', function(e) {
                    o.cancelCall();
                    dom.remove();
                    e.preventDefault();
                });
                btn_ok.on('click', function(e) {
                    o.okCall();
                    dom.remove();
                    e.preventDefault();
                });

                dom.appendTo($('body'));

                return $dom;
            };
        })(jQuery);

        function prev() {
            var pageCount = $(".flipbook").turn("pages"); //总页数
            var currentPage = $(".flipbook").turn("page"); //当前页
            if (currentPage >= 2) {
                $(".flipbook").turn('page', currentPage - 1);
            } else {}
        }

        function next() {
            var pageCount = $(".flipbook").turn("pages"); //总页数
            var currentPage = $(".flipbook").turn("page"); //当前页
            if (currentPage <= pageCount) {
                $(".flipbook").turn('page', currentPage + 1);
            } else {}
        }
        //上一页
        $(".previousPage").bind("touchend", function() {
            prev();
        });
        // 下一页
        $(".nextPage").bind("touchend", function() {
            next();
        });
        //返回到目录页
        $(".return").bind("touchend", function() {
            $(document).confirm('您确定要返回首页吗?', {}, function() {
                $(".flipbook").turn('page', 1); //跳转页数
            }, function() {});
        });
        //跳到第n页
        function gonpage(gopage) {
            var pageCount = $(".flipbook").turn("pages"); //总页数
            var currentPage = gopage //当前页
            $(".flipbook").turn('page', currentPage + 1);
        }
        // 列表关闭
        $('.closelist').bind('touchend', function() {
                $('.zdymodel').fadeOut().hide()
            })
            // 按钮
            // console.log($(document).height(),$('.fyanbtn').width(),'pppppp');
        var flag = true;
        $('.hpbtn').bind('touchend', function() {
            if (flag) {
                $('.hpbtn').addClass('nhengpign')
                $('.hpbtn').css({
                        left: 10 + 'px',
                        top: ($('.hpbtn').width() + 10) + 'px'
                    })
                    // 按钮
                $('.fyanbtn').addClass('nhengpign fyanbtn1')
                $('.fyanbtn').css({
                        left: $(document).width() - $('.fyanbtn').height() + 'px',
                        top: $('.fyanbtn').width() + ($(document).height() - $('.fyanbtn').width()) / 2 +
                            'px'
                    })
                    // 书本
                $('.tsbtn').addClass('nhengpign1')
            } else {
                $('.hpbtn').removeClass('nhengpign')
                $('.hpbtn').css({
                        left: $(document).width() - $('.hpbtn').width() - 10 + 'px',
                        top: 10 + 'px',
                    })
                    // 按钮
                $('.fyanbtn').removeClass('nhengpign fyanbtn1')
                $('.fyanbtn').css({
                        left: 0 + 'px',
                        top: ($(document).height() - $('.fyanbtn').height()) + 'px'
                    })
                    // 书本
                $('.tsbtn').removeClass('nhengpign1')
            }
            flag = !flag
        })

        // 显示书页列表
        $('.morepage').bind('touchend', function() {
            if (!flag) {
                $('.sjbox').addClass('nhengpign')
                $('.sjbox').css({
                    height: $(document).width(),
                    width: $(document).height(),
                    marginTop: $(document).height(),
                })
                $('.sjbox ul li').css({
                    width: 27 + '%'
                })
                $('.sjbox ul').css({
                    height: $(document).width(),
                    // width:$(document).height()
                    left: $(document).height()
                })
            } else {

                $('.sjbox').removeClass('nhengpign')
                $('.sjbox')[0].removeAttribute('style')

                $('.sjbox ul').css({
                    height: $(document).height(),
                })
                $('.sjbox ul li').css({
                    width: 40 + '%'
                })

            }
            $('.zdymodel').fadeIn().show()

        })

        var startX;
        var startY;
        $("body").on("touchstart", function(e) {
            // 判断默认行为是否可以被禁用
            if (e.cancelable) {
                // 判断默认行为是否已经被禁用
                if (!e.defaultPrevented) {
                    e.preventDefault();
                }
            }
            startX = e.originalEvent.changedTouches[0].pageX;
            startY = e.originalEvent.changedTouches[0].pageY;
        });
        $("body").on("touchend", function(e) {
            // 判断默认行为是否可以被禁用
            if (e.cancelable) {
                // 判断默认行为是否已经被禁用
                if (!e.defaultPrevented) {
                    e.preventDefault();
                }
            }
            moveEndX = e.originalEvent.changedTouches[0].pageX,
                moveEndY = e.originalEvent.changedTouches[0].pageY,
                X = moveEndX - startX,
                Y = moveEndY - startY;
            //左滑
            if (X > 0) {
                // alert('左滑');
                prev();
            }
            //右滑
            else if (X < 0) {
                // alert('右滑');
                next();
            }
            //下滑
            else if (Y > 0) {
                // alert('下滑');
                next();
            }
            //上滑
            else if (Y < 0) {
                // alert('上滑');
                prev();
            }
            //单击
            else {
                return false;
            }
        });
    </script>
</body>

</html>